<template>
  <div class="wrapper">
    <div class="top">
      <h4>首页 > 员工账套设置</h4>
    </div>

    <el-table :data="EmpSalary" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="employee.name" label="姓名"></el-table-column>
      <el-table-column prop="employee.workID" label="工号"></el-table-column>
      <el-table-column prop="employee.email" label="电子邮件"></el-table-column>
      <el-table-column prop="employee.phone" label="电话号码"></el-table-column>

      <el-table-column label="所属部门" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>基本工资: {{ scope.row.salary.basicSalary }}</p>
            <p>交通补助: {{ scope.row.salary.trafficSalary }}</p>
            <p>午餐补助: {{ scope.row.salary.lunchSalary }}</p>
            <p>奖金: {{ scope.row.salary.bonus }}</p>
            <p>养老金比率: {{ scope.row.salary.pensionPer }}</p>
            <p>养老金基数: {{ scope.row.salary.pensionBase }}</p>
            <p>医疗保险比率: {{ scope.row.salary.medicalPer }}</p>
            <p>医疗保险基数: {{ scope.row.salary.medicalBase }}</p>
            <p>公积金比率: {{ scope.row.salary.accumulationFundPer }}</p>
            <p>公积金基数: {{ scope.row.salary.accumulationFundBase }}</p>
            <p>启用时间: {{ scope.row.salary.createDate }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.salary.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="edit(scope.$index, scope.row)"
            >修改工资账套</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- //修改部门 -->
    <el-dialog title="修改所属部门" :visible.sync="updateSalary">
      <el-form :model="salaryForm" label-width="150px" :inline="true">
        <el-form-item label="选择账套所属部门:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in salaryForm"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onUpdate()">立即修改</el-button>
          <el-button @click="updateSalary = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SalSobCfg",
  data() {
    return {
      value: "",
      EmpSalary: [],
      updateSalary: false,
      salaryForm: [],
      id: "",
      sid: "",
    };
  },
  created() {
    this.showAllEmpSalary();
    this.showAllSalary();
  },
  computed: {},
  filters: {},
  methods: {
    showAllEmpSalary() {
      this.$axios.get("EmpSalaryController/listAllEmpSalary").then((res) => {
        this.EmpSalary = res.data;
      });
    },
    edit(index, row) {
      this.updateSalary = true;
      this.id = row.id;
    },
    showAllSalary() {
      this.$axios.get("/SalaryController/listAllSalary").then((res) => {
        this.salaryForm = res.data;
      });
    },
    //发送修改请求
    onUpdate() {
      this.$axios
        .get(
          "/EmpSalaryController/updateEmpSalary?sid=" +
            this.value +
            "&id=" +
            this.id
        )
        .then((res) => {
           this.showAllEmpSalary();
          console.log("修改状态码" + res.data);
          this.$message("所属部门修改成功");
          this.updateSalary = false;
         
        });
    },
  },
};
</script>

<style scoped>
.top {
  width: 20%;
  height: 5%;
  margin-left: 0%;
}
</style>
